<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<title>淘宝</title>
		<link rel="stylesheet" type="text/css" href="css/svg/font.css" />
		<link rel="stylesheet" type="text/css" href="css/zhuye.css" />

		<link rel="stylesheet" href="css/swiper.min.css" />
		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

		<style>
			.swiper-container {
				width: 100%;
				height: 100%;
				position: relative;
			}
			
			.swiper-slide {
				text-align: center;
				font-size: 18px;
				background: #fff;
			}
			
			.swiper-slide img {
				width: 100%;
				height: auto;
			}
			
			.swiper-container-horizontal>.swiper-pagination-bullets,
			.swiper-pagination-custom,
			.swiper-pagination-fraction {
				bottom: 0.1rem;
				width: 100%;
				left: 0;
			}
			
			.swiper-pagination-bullet {
				width: 0.35rem;
				height: 0.35rem;
			}
		</style>
		<script>
			window.onload = function() {
				document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
				window.onresize = function() {
					document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
				};
			};
		</script>
	</head>

	<body>
		<!--标题开始-->
		<header id="tianmaocs">
			<img src="img/tianmaochaoshi.jpg" id="tmcsImg" />
			<span id="beijingdf">北京∨</span>
			<a href="../1603B-taobao/gouwuche.html" id="gouwucheImg"><img src="img/shoppingTrolley.jpg" /></a>
		</header>
		<!--标题结束-->
		<!--搜索框开始-->
		<section id="sousuok">
			<i class="icon-list2" id="icon-list2"></i>
			<a href="sousuo.html"> <input type="search" placeholder="舒舒服服洗个头" id="sousuoinput" /></a>
			<i class="icon-search"></i>
			<img src="img/heart.gif" />
		</section>
		<!--搜索框结束-->
		<!--轮播图开始-->
		<section id="banner">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="img/banner1.jpg" /></div>
					<div class="swiper-slide"><img src="img/banner2.jpg" /></div>
					<div class="swiper-slide"><img src="img/banner3.jpg" /></div>
					<div class="swiper-slide"><img src="img/banner4.jpg" /></div>
					<div class="swiper-slide"><img src="img/banner5.jpg" /></div>
					<div class="swiper-slide"><img src="img/banner6.jpg" /></div>
					<div class="swiper-slide"><img src="img/banner7.jpg" /></div>
					<div class="swiper-slide"><img src="img/banner8.jpg" /></div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
		</section>
		<!--轮播图结束-->
		<!--gif图开始-->
		<section>
			<a href="javascript:;"><img src="img/giftu.gif" /></a>
		</section>
		<!--gif图结束-->
		<!--10个小图导航开始-->
		<section>
			<div>
				<article>
					<a href="javascript:;"><img src="img/muyingwanju.gif" /></a>
					<p>
						<a href="javascript:;">母婴玩具</a>
					</p>
				</article>
				<article>
					<a href="javascript:;"><img src="img/xiuxianlingshi2.gif" /></a>
					<p>
						<a href="javascript:;">休闲零食</a>
					</p>
				</article>
				<article>
					<a href="javascript:;"><img src="img/jiushuiruyin.gif" /></a>
					<p>
						<a href="javascript:;">酒水乳饮</a>
					</p>
				</article>
				<article>
					<a href="javascript:;"><img src="img/liangyoufushi.gif" /></a>
					<p>
						<a href="javascript:;">粮油副食</a>
					</p>
				</article>
				<article>
					<a href="javascript:;"><img src="img/meizhuanggehu.gif" /></a>
					<p>
						<a href="javascript:;">美妆个护</a>
					</p>
				</article>
			</div>
			<div>
				<article>
					<a href="javascript:;"><img src="img/jiajuyongpin.gif" /></a>
					<p>
						<a href="javascript:;">家居用品</a>
					</p>
				</article>
				<article>
					<a href="javascript:;"><img src="img/jiatingqingjie.gif" /></a>
					<p>
						<a href="javascript:;">家庭清洁</a>
					</p>
				</article>
				<article>
					<a href="javascript:;"><img src="img/jiayongdianqi.gif" /></a>
					<p>
						<a href="javascript:;">家用电器</a>
					</p>
				</article>
				<article>
					<a href="javascript:;"><img src="img/jinkoushipin.gif" /></a>
					<p>
						<a href="javascript:;">进口食品</a>
					</p>
				</article>
				<article>
					<a href="javascript:;"><img src="img/dongjibaonuan.gif" /></a>
					<p>
						<a href="javascript:;">冬季保暖</a>
					</p>
				</article>
			</div>
		</section>
		<!--10个小图导航结束-->

		<!--今日疯抢开始-->
		<section>
			<left>
				<img src="img/jinrifengqiangLogo.svg" class="jrfqLogo" />
				<p>15点场剩余时间</p>
				<img src="img/daojishi.jpg" class="daojishi" />
				<a href="javascript:;"><img src="img/jinrifengqiang.jpg_.webp" class="jrfqComm" /></a>
				<article>1元起</article>
			</left>
			<right>
				<top>
					<left>
						<a href="javascript:;">
							<p>生鲜区</p>
							<p>买2免1</p>
							<p>满99减50</p>
						</a>
					</left>
					<right>
						<a href="javascript:;"><img src="img/shengxianqu.jpg_.webp" /></a>
						<div>
							<p>¥ 9.9</p>
							<p>1份</p>
						</div>
					</right>
				</top>
				<bottom>
					<article>
						<p>好货</p>
						<p>特价限量抢</p>
						<a href="javascript:;"><img src="img/haohuoxianliang.jpg_.webp" /></a>
					</article>
					<article>
						<p>量贩装</p>
						<p>仅7.9元/瓶</p>
						<a href="javascript:;"><img src="img/liangfanzhuang.jpg_.webp" /></a>
					</article>
					<article>
						<p>9元馆</p>
						<p>9元抢浴巾</p>
						<a href="javascript:;"><img src="img/9yuanguan.webp" /></a>
					</article>
				</bottom>
			</right>
		</section>
		<!--今日疯抢结束-->
		<!--买贵赔十倍开始-->
		<section>
			<article>
				<a href="javascript:;"><img src="img/guiyipeishi.svg" /></a>
				<p>买贵赔十倍></p>
			</article>
			<a href="javascript:;"><img src="img/guiyipeishi2.jpg_.webp" /></a>
		</section>
		<!--买贵赔十倍结束-->

		<!--亿滋开始-->
		<promotion>
			<div>
				<a href="javascript:;">
					<img src="img/yizi.png" />
				</a>
			</div>
			<div>
				<a href="javascript:;">
					<img src="img/yili.png" />

				</a>
				<a href="javascript:;">
					<img src="img/heiren.png" />
				</a>
			</div>
			<div>
				<a href="javascript:;">
					<img src="img/chu.png" />

				</a>
				<a href="javascript:;">
					<img src="img/chuwei.png" />
				</a>
			</div>
		</promotion>
		<!--亿滋结束-->

		<!--促销活动更多开始-->
		<more>
			<a href="javascript:;"><img src="img/cuxiao.png" /></a>
		</more>
		<!--促销活动更多结束-->

		<!--促销活动开始-->
		<activity>
			<div>
				<a href="javascript:;"><img src="img/gaodian.png" /></a>
				<a href="javascript:;"><img src="img/niunai.png" /></a>
				<a href="javascript:;"><img src="img/jinkou.png" /></a>
			</div>
			<div>
				<a href="javascript:;"><img src="img/huli.png" /></a>
				<a href="javascript:;"><img src="img/liangpin.png" /></a>
				<a href="javascript:;"><img src="img/meizhuang.png" /></a>
			</div>
			<div>
				<a href="javascript:;"><img src="img/xinxiangyin.png" /></a>
				<a href="javascript:;"><img src="img/lingshi.png" /></a>
				<a href="javascript:;"><img src="img/baokuan.png" /></a>
			</div>
		</activity>
		<!--促销活动结束-->

		<!--热门市场更多开始-->
		<hot>
			<h1>热门市场</h1>
			<a href="javascript:;">更多 ></a>
		</hot>
		<!--热门市场更多结束-->

		<!--热门市场开始-->
		<market>
			<div>
				<a href="javascript:;">
					<p>
						<span>饼干糖巧</span>
						<span>解馋必备</span>
					</p>
					<img src="img/shuyuan.png" />
				</a>
				<a href="javascript:;">
					<p>
						<span>坚果肉干</span>
						<span>第二件半价</span>
					</p>
					<img src="img/haitai.png" />
				</a>
			</div>
			<div>
				<a href="javascript:;">
					<p>
						<span>纸制品</span>
						<span>买二免一</span>
					</p>
					<img src="img/yuanmu.png" />
				</a>
				<a href="javascript:;">
					<p>
						<span>厨卫清洁</span>
						<span>买二免一</span>
					</p>
					<img src="img/diaopai.png" />
				</a>
				<a href="javascript:;">
					<p>
						<span>方便素食</span>
						<span>一元尝鲜</span>
					</p>
					<img src="img/sushi.png" />
				</a>
				<a href="javascript:;">
					<p>
						<span>口腔护理</span>
						<span>买二免一</span>
					</p>
					<img src="img/kouqiang.png" />
				</a>
			</div>
			<div>
				<a href="javascript:;">
					<p>
						<span>奶制品</span>
						<span>爆款直降</span>
					</p>
					<img src="img/naizhi.png" />
				</a>
				<a href="javascript:;">
					<p>
						<span>个人护理</span>
						<span>满99减50</span>
					</p>
					<img src="img/xifa.png" />
				</a>
				<a href="javascript:;">
					<p>
						<span>厨房餐饮</span>
						<span>全场五折起</span>
					</p>
					<img src="img/canyin.png" />
				</a>
				<a href="javascript:;">
					<p>
						<span>油品米面</span>
						<span>爆款直降</span>
					</p>
					<img src="img/you.png" />
				</a>
			</div>
		</market>
		<!--热门市场结束-->

		<!--惠生活开始-->
		<div class="huishenghuo">
			<top>
				<h1>惠生活</h1>
				<span>小喵教你会生活</span>
				<a href="javascript:;">更多></a>
			</top>
			<bottom>
				<ul id='ul'>
					<li><img src="img/dikaluli.gif"></li>
					<li><img src="img/dikaluli.gif"></li>
				</ul>
			</bottom>
		</div>
		<!--id-->
		<!--热销推荐开始-->
		<rxtjHeader>
			<h1>热销推荐</h1>
		</rxtjHeader>
		<aside id="rexiaotj">
			<ul id="RXTJul">
				<li class="jingxuan">
					<a href="javascript:;"><i class="icon-star-empty"></i>
						<p>精选</p>
					</a>
				</li>
				<li class="lingshi">
					<a href="javascript:;"><img src="img/lingshi.gif">
						<p>零食</p>
					</a>
				</li>
				<li class="meirong">
					<a href="javascript:;"><img src="img/meirongxihu.gif">
						<p>美容洗护</p>
					</a>
				</li>
				<li class="jiaqing">
					<a href="javascript:;"><img src="img/jiaqingjiaju.gif">
						<p>家清家居</p>
					</a>
				</li>
				<li class="liangyou">
					<a href="javascript:;"><img src="img/liangyoufushi2.gif">
						<p>粮油副食</p>
					</a>
				</li>
				<li class="shengxian">
					<a href="javascript:;"><img src="img/shengxian.gif">
						<p>生鲜</p>
					</a>
				</li>
				<li class="jiushui">
					<a href="javascript:;"><img src="img/jiushuiyinliao.gif">
						<p>酒水饮料</p>
					</a>
				</li>
				<li class="muying">
					<a href="javascript:;"><img src="img/muying.gif">
						<p>母婴</p>
					</a>
				</li>
				<li class="jiayong">
					<a href="javascript:;"><img src="img/jiayongdianqi2.gif">
						<p>家用电器</p>
					</a>
				</li>
				<p></p>
			</ul>
		</aside>
		<div class="rementuijian">
			<section id="RXTJcont"></section>
		</div>
		<p id="loadMore">
			<a href="javascript:;">加载更多</a>
		</p>
		<div id="kongbaicheng"></div>
		<!--热销推荐结束-->

		<!--底部开始-->
		<footer>
			<a href="javascript:;">
				<img src="img/shouyeImg.jpg" />
				<p>首页</p>
			</a>
			<a href="javascript:;">
				<img src="img/liImg.jpg" />
			</a>
			<a href="javascript:;">
				<img src="img/jinlongyuImg.jpg" />
				<p>品牌特惠</p>
			</a>
			<a href="javascript:;">
				<i class="icon-list2"></i>
				<p>分类</p>
			</a>
			<a href="../1603B-taobao/my.html">
				<i class="icon-user"></i>
				<p>我的</p>
			</a>
		</footer>
		<div class="chenggong">
			<span>加入购物车成功</span>
		</div>

		<!--底部结束-->
	</body>
	<script src="js/jquery-1.11.2.js"></script>
	<script src="js/swiper.jquery.min.js"></script>
	<script src="js/navTuoZhuai.js"></script>

	<script>
		var swiper = new Swiper('.swiper-container', {
			loop: true,
			autoplay: '6000',
			pagination: '.swiper-pagination',
			paginationClickable: true,
			keyboardControl: true,
			autoplayDisableOnInteraction: false
		});
	</script>
	<script>
		//下拉网页搜索框推到置顶
		window.onscroll = function() {
			var ssPosi = document.body.scrollTop || document.documentElement.scrollTop;
			//document.title = ssPosi;
			if(ssPosi > '100') {
				$("img").remove('#tmcsImg');
				$("span").remove('#beijingdf');
				$('#sousuok>img').remove('img');
				$('#sousuok').css('top', '0.1rem').css('z-index', '99').css('width', '86%');
			} else {
				return;
			}
		}

		//热销推荐获取数据
		var start = 0,
			sort = 'jingxuan';
		getCommodity(start, sort);
		$('#RXTJul li').bind('click', function() {
			$('#RXTJcont').empty();
			start = 0;
			sort = $(this).attr('class');
			getCommodity(start, sort);
		})
		$('#loadMore').bind('click', function() {
				start += 4;
				getCommodity(start, sort);
			})
			//封装获取商品Ajax,设置起始位置和商品类型两个参数
		function getCommodity(start, sort) {
			$.ajax({
				type: "post",
				url: "http://192.168.1.100/supermarket/data/get_commodity.php",
				async: true,
				data: {
					'start': start,
					'classify': sort
				},
				dataType: 'jsonp', //使用jsop开始跨域
				jsonp: 'callback', //告诉后台，我需要一个回调函数
				jsonpCallback: "success_jsonpCallback", //回调函数的名称
				success: function(data) {
					//debugger;
					if(data && data.length > 0) {
						for(var i = 0; i < data.length; i++) {
						var structure = '<div><a href="../1603B-taobao/shangpin.html?id=' + data[i].id 
						+ '"><img src="' + 'http://192.168.1.100/supermarket/img/' 
						+ data[i].img +'"></a><p>'
						+ data[i].name + '</p><span>月销' 
						+ data[i].count + '</span><span>¥' 
						+ data[i].price + '</span><a href="javascript:;" id="shopcar" carID="'
						+ data[i].id + '"><i class="icon-cart"></i></a><img src="' + 'http://192.168.1.100/supermarket/img/' 
						+ data[i].img +'" class="joinCarCommImg"></div>';
						$('#RXTJcont').append(structure);
					}
					}
					//判断data剩下的商品数量 >4显示加载 <4隐藏加载
					if(data && data.length >= 4) {
						$('#loadMore').show();
					} else {
						$('#loadMore').hide();
					}
				},
				error: function(data) {}
			})
		}

		　 //加入购物车
		$('#RXTJcont').delegate('#shopcar','click',function(){
			
			if(localStorage.user_psd && localStorage.user_phone) {
				$.ajax({
					type: "get",
					url: "http://192.168.1.100/supermarket/data/my_commodity_car.php",
					async: true,
					data: {
						'user_phone': localStorage.user_phone,
						'commodity_id': $(this).attr('carid'),
						'count': 1
					},
					dataType: "jsonp",
					jsop: "callback",
					jsonpCallback: "success_JsonpCallback",
					success: function(data) {
						//	debugger;
						if(data.msg == "success") {
							$(".chenggong").show();
							setTimeout(function() {
								$(".chenggong").hide();
							}, 1000)
						};
						if(data.msg == "error") {
							$(".chenggong").show();
							$(".chenggong span").text("提交信息不足")
							setTimeout(function() {
								$(".chenggong").hide();
							}, 1000)
						}
					},
					error: function(data) {}
				});
			}
		})

		
	</script>

</html>